import React, { useMemo, useCallback } from "react";
const Container = ({ children }) => {
  return <div>{children}</div>;
};
Container.whyDidYouRender = true;
const NoRerender = () => {
  const style = useMemo(() => ({ marginLeft: 30 }), []);
  const _list = useMemo(() => [1, 2, 3], []);
  const onClick = useCallback(() => {
    console.log(1);
  }, []);
  const ListData = useMemo(
    () => _list.map((item) => <div key={item}>{item}</div>),
    [_list]
  );
  return (
    <Container style={style} onClick={onClick}>
      {/* {ListData} */}
      {_list.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </Container>
  );
};
NoRerender.whyDidYouRender = true;
export default NoRerender;
